<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src="js/main.js" type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
 
<link href="css/scrolltotop.css" rel="stylesheet" type="text/css">
<title>EduProcrasWebsiteLayout</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php
include ("dbConfig.php");
?>

<style type="text/css" media="screen">
    
    body{
        background-color: #000;
    }
	
	h1 {
	font-family: "BankGothic Lt BT", Geneva;
	font-size: 40px;
	color: #FFF;
	}
	
	p {
	font-family: "BankGothic Lt BT", Geneva;
	font-size: 14px;
	color: #FFF;
	text-align: center;
	}

    /* Give the header a height and a background image */
    #header{
        height:145px; 
        background: #000 url(images/headerbackgroundEX.jpg) repeat-y scroll left top;
        text-align:center;
    }
    
    /* Create a Shadow Overlay */ 
    #header div{
        width:760px;
        height:145px;
        
    }
    
    /* Vertically position header text and style it*/
    #header h1{
        padding-top:40px;
        font-family: BankGothic Lt BT, Geneva, sans-serif;
        color:#000;
		font-size:70px;
    }
    
    /* Give basic styles to the body and the navigation */
    #body{
        background-color:#efefef;
        height:500px;
    }
    #nav{
        height:35px;
        background-color: #111;
    }
	
	div#register
{
  margin: 0px 20px 0px 20px;
  display: none;
}

.centre {
	text-align: center;
}

* { 
	font-family: Verdana; font-size: 96%; 
}

label { 
	width: 10em; float: left;
}

label.error {
	float: none; color: red; padding-left: .5em; vertical-align: top;
}

p {
	clear: both;
	text-align: left;
}

.submit {
	margin-left: 12em; 
}

em {
	font-weight: bold; padding-right: 1em; vertical-align: top;
}    
</style>

  <script>
  $(document).ready(function(){
	$("#LoginForm").validate();
	$('#RegisterForm').validate();
  });
  
  </script>

</head>
<body bgcolor="#0000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="centre" onLoad="MM_preloadImages('images/btn_picsOn.gif','images/btn_videoOn.gif','images/btn_aboutOn.gif','images/btn_factsOn.gif')">
<a href="#" class="scrollToTop">TOP</a>
<div>
<table id="Table_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td>
			<img src="images/EduProcrasWebsiteLayout_01.gif" width="4" height="5" alt=""></td>
		<td>
			<img src="images/EduProcrasWebsiteLayout_02.gif" width="187" height="5" alt=""></td>
		<td colspan="9" rowspan="2">
			<img src="images/EduProcrasWebsiteLayout_03.gif" width="833" height="25" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/EduProcrasWebsiteLayout_04.gif" width="4" height="20" alt=""></td>
		<td rowspan="3"><a href="index.php"><img src="images/img_logo.gif" width="187" height="181" alt="" border="0"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/EduProcrasWebsiteLayout_06.gif" width="4" height="145" alt=""></td>
		<td>
			<img src="images/EduProcrasWebsiteLayout_07.gif" width="9" height="145" alt=""></td>
		<td colspan="6">
			<div id="header">
        
        <div>
            <h1>LOGIN</h1> 
        </div>  
    </div></td>
		<td colspan="2">
			<img src="images/EduProcrasWebsiteLayout_09.gif" width="64" height="145" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="145" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/EduProcrasWebsiteLayout_10.gif" width="4" height="25" alt=""></td>
		<td colspan="9" rowspan="2">
			<img src="images/EduProcrasWebsiteLayout_11.gif" width="833" height="25" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/EduProcrasWebsiteLayout_12.gif" width="187" height="9" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="9" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
	    <img src="images/EduProcrasWebsiteLayout_13.gif" width="70" height="63" alt=""><img src="images/btnLogin_On.jpg" width="141" height="63" alt="Login"></td>
		<td><a href="pics.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_pics','','images/btn_picsOn.gif',1)"><img src="images/btn_picsOff.gif" alt="Pics" name="btn_pics" width="141" height="63" border="0"></a></td>
		<td><a href="video.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_video','','images/btn_videoOn.gif',1)"><img src="images/btn_videoOff.gif" alt="Videos" name="btn_video" width="141" height="63" border="0"></a></td>
		<td><a href="facts.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Facts','','images/btn_factsOn.gif',1)"><img src="images/btn_factsOff.gif" alt="Facts" name="Facts" width="142" height="63" border="0"></a></td>
		<td>
			<img src="images/EduProcrasWebsiteLayout_17.gif" width="3" height="63" alt=""></td>
		<td colspan="2"><a href="about.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_about','','images/btn_aboutOn.gif',1)"><img src="images/btn_aboutOff.gif" alt="About" name="btn_about" width="138" height="63" border="0"></a></td>
		<td>
			<img src="images/EduProcrasWebsiteLayout_19.gif" width="57" height="63" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="63" alt=""></td>
	</tr>
	<tr>
		<td colspan="11">
<div id = "login">
<h1>LOGIN</h1>
<form id="LoginForm" action="userLogin.php" method="post">
<p>Username:</p> <input type="text" name="txtUsername" class="required"/>
<br />
<br />
<p>Password:</p> <input type="password" name="txtPassword" class="required"/>
<br />
<br />
<br />
<input type="submit" name="btnLogin" />
<br/>
<br />
</form>
</div>

<a href="javascript:toggleLayer('register');" title="Register now!">
<p>Not Registered?</p>
</a>

<script type="text/javascript">
function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>

<div id = "register">
<h1>REGISTER</h1>
<form id="RegisterForm" action="register.php" method="post">
<p>First Name:</p> <input type="text" name="txtRegFirstName" class="required"/>
<br />
<br />
<p>Last Name:</p> <input type="text" name="txtRegLastName" class="required"/>
<br />
<br />
<p>Email:</p> 
<input type="text" name="txtRegEmail" class="required"/>
<br />
<br />
<p>Username:</p> <input type="text" name="txtRegUsername" class="required"/>
<br />
<br />
<p>Password:</p> <input type="password" name="txtRegPassword" class="required"/>
<p>Repeat:</p> <input type="password" name="txtRegRepPassword" class="required"/>
<br />
<br />
<input type="submit" name="btnRegister"/>
</form>
        </div></td>
		<td>
			<img src="images/spacer.gif" width="1" height="510" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="187" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="202" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="141" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="141" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="142" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="131" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="57" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
</div>
</body>



<script type="text/javascript" charset="utf-8">

    var scrollSpeed = 70;       // Speed in milliseconds
    var step = 1;               // How many pixels to move per step
    var current = 0;            // The current pixel row
    var imageHeight = 1500;     // Background image height
    var headerHeight = 145;     // How tall the header is.
    
    //The pixel row where to start a new loop
    var restartPosition = -(imageHeight - headerHeight);
    
    function scrollBg(){
        
        //Go to next pixel row.
        current -= step;
        
        //If at the end of the image, then go to the top.
        if (current == restartPosition){
            current = 0;
        }
        
        //Set the CSS of the header.
        $('#header').css("background-position","0 "+current+"px");
        
        
    }
    
    //Calls the scrolling function repeatedly
    var init = setInterval("scrollBg()", scrollSpeed);
    
</script>   
</html>